<template>
  <view class="product-detail">

    <!-- 商品轮播图 -->
    <view class="product-swiper" v-if="product && product.images && product.images.length">
      <u-swiper
        :list="product.images"
        :current="currentSwiper"
        @change="handleSwiperChange"
        :autoplay="false"
        :circular="false"
        indicator-color="rgba(255,255,255,0.5)"
        indicator-active-color="#FFFFFF"
        indicator-mode="rect"
        height="75vh"
      >
        <template #item="{ item }">
          <view class="swiper-item">
            <image 
              :src="item" 
              mode="widthFix" 
              class="swiper-img"
              @click="previewImage(item)"
              :style="{ transform: zoomTransform, transition: 'transform 0.3s ease' }"
              @touchstart="handleTouchStart"
              @touchmove="handleTouchMove"
              @touchend="handleTouchEnd"
            ></image>
          </view>
        </template>
      </u-swiper>
    </view>

    <!-- 加载状态提示 -->
    <view class="loading" v-if="isLoading">
      <u-loading-icon size="40rpx" color="#1E40AF"></u-loading-icon>
      <text>加载中...</text>
    </view>

    <!-- 商品信息主体 -->
    <scroll-view 
      class="detail-scroll" 
      scroll-y 
      @scroll="handleScroll"
      :scroll-with-animation="true"
      v-if="!isLoading && product"
    >
      <!-- 商品基本信息 -->
      <view class="product-base fade-in">
        <view class="product-title">
          <text>{{ product.name }}</text>
          <view class="product-tag" v-if="product.tag">{{ product.tag }}</view>
        </view>
        
        <view class="product-conditions" v-if="product.condition === 'used'">
          <u-icon name="info-circle" color="#D97706" size="24rpx"></u-icon>
          <text>{{ product.usedInfo || '二手商品，成色良好' }}</text>
        </view>
        
        <view class="product-price">
          <text class="price-number">¥{{ product.price }}</text>
          <text class="price-unit" v-if="product.priceUnit">/{{ product.priceUnit }}</text>
          <view class="price-original" v-if="product.originalPrice">
            原价 ¥{{ product.originalPrice }}
          </view>
        </view>
        
        <view class="product-specs" v-if="product.shortSpecs">
          <view class="spec-item" v-for="(spec, key) in product.shortSpecs" :key="key">
            <text class="spec-key">{{ key }}：</text>
            <text class="spec-value">{{ spec }}</text>
          </view>
        </view>
      </view>

      <!-- 分割线 -->
      <view class="divider"></view>
      <!-- 商品详情描述 -->
      <view class="product-description" >
		  
        <view class="section-title">
          <text>产品详情</text>
          <view class="title-line"></view>
        </view>
        
        <view class="desc-content" >
			
          <view class="desc-text">{{ product.description || '暂无详细描述' }}</view>
          
          <view class="desc-gallery" v-if="product.descImages && product.descImages.length">
            <image 
              :src="img" 
              mode="widthFix" 
              class="desc-img"
              v-for="(img, index) in product.descImages" 
              :key="index"
            ></image>
          </view>
        </view>
      </view>

      <!-- 技术参数 -->
      <view class="product-params" :class="{ 'fade-in': isParamsVisible }">
        <view class="section-title">
          <text>技术参数</text>
          <view class="title-line"></view>
        </view>
        
        <u-collapse accordion>
          <u-collapse-item 
            title="基本参数" 
            :open="true"
            icon-color="primaryColor"
            title-style="font-size: 28rpx; color: #0F172A; font-weight: 500"
          >
            <view class="params-table">
              <view class="param-row" v-for="(item, index) in (product.params && product.params.basic) || []" :key="index">
                <text class="param-name">{{ item.name }}</text>
                <text class="param-value">{{ item.value }}</text>
              </view>
            </view>
          </u-collapse-item>
          
          <u-collapse-item 
            title="性能参数"
            icon-color="primaryColor"
            title-style="font-size: 28rpx; color: #0F172A; font-weight: 500"
          >
            <view class="params-table">
              <view class="param-row" v-for="(item, index) in (product.params && product.params.performance) || []" :key="index">
                <text class="param-name">{{ item.name }}</text>
                <text class="param-value">{{ item.value }}</text>
              </view>
            </view>
          </u-collapse-item>
        </u-collapse>
      </view>

      <!-- 评价信息 -->
      <view class="product-reviews" :class="{ 'fade-in': isReviewsVisible }">
        <view class="section-title">
          <text>用户评价</text>
          <view class="title-line"></view>
        </view>
        
        <view class="review-summary" v-if="product.reviewCount > 0">
          <view class="review-score">
            <text class="score-number">{{ product.reviewScore }}</text>
            <text class="score-desc">综合评分</text>
          </view>
          
          <view class="review-stars">
            <u-rate 
              v-model="product.reviewScore" 
              :active-color="primaryColor"
              :inactive-color="inactiveColor"
              :size="36"
              :disabled="true"
              :gap="8"
            ></u-rate>
            <text class="review-count">({{ product.reviewCount }}条评价)</text>
          </view>
        </view>
        
        <view class="no-review" v-else>
          <text>暂无用户评价</text>
        </view>
        
        <view class="review-list" v-if="product.reviews && product.reviews.length">
          <view class="review-item" v-for="(review, index) in product.reviews" :key="index">
            <view class="review-header">
              <view class="review-avatar">
                <image :src="review.avatar" mode="widthFix"></image>
              </view>
              <view class="review-user">
                <text class="user-name">{{ review.userName }}</text>
                <u-rate 
                  v-model="review.score" 
                  :active-color="primaryColor"
                  :inactive-color="inactiveColor"
                  :size="24"
                  :disabled="true"
                  :gap="4"
                ></u-rate>
              </view>
              <text class="review-date">{{ review.date }}</text>
            </view>
            
            <text class="review-content">{{ review.content }}</text>
            
            <view class="review-images" v-if="review.images && review.images.length">
              <image 
                :src="img" 
                mode="widthFix" 
                class="review-img"
                v-for="(img, i) in review.images" 
                :key="i"
              ></image>
            </view>
          </view>
        </view>
        
        <view class="review-more" @click="loadMoreReviews" v-if="product.reviewCount > 0">
          <text>查看更多评价</text>
          <u-icon name="arrow-right" color="primaryColor" size="24rpx"></u-icon>
        </view>
      </view>

      <!-- 相关推荐 -->
      <view class="product-recommends" :class="{ 'fade-in': isRecommendsVisible }">
        <view class="section-title">
          <text>相关推荐</text>
          <view class="title-line"></view>
        </view>
        
        <view class="recommends-list" v-if="relatedProducts.length">
          <view 
            class="recommend-item" 
            v-for="(item, index) in relatedProducts" 
            :key="index"
            @click="navToDetail(item)"
          >
            <image :src="item.image" mode="aspectFill" class="recommend-img"></image>
            <text class="recommend-name">{{ item.name }}</text>
            <text class="recommend-price">¥{{ item.price }}</text>
          </view>
        </view>
        <view class="no-recommend" v-else>
          <text>暂无相关推荐商品</text>
        </view>

        <!-- 底部留白 -->
        <view class="bottom-space"></view>
      </view>
    </scroll-view>

	<view class="buy-bar" :style="{ transform: buyBarTransform }" v-if="!isLoading && product">
	  <!-- 收藏按钮 -->
	  <view class="action-item favorite-item" @click="toggleFavorite">
		<u-icon 
		  :name="isFavorite ? 'heart-fill' : 'heart'" 
		  :color="isFavorite ? '#FF3B30' : '#8E8E93'" 
		  size="40rpx"
		></u-icon>
		<text :class="isFavorite ? 'active-text' : ''">收藏</text>
	  </view>
	  
	  <!-- 立即购买按钮 -->
	  <view class="action-item buy-item" @click="buyImmediately">
		<text>立即购买 ¥{{ product.price }}</text>
	  </view>
	</view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      // 颜色变量
      primaryColor: '#1E40AF',
      inactiveColor: '#E2E8F0',
      
      // 商品数据
      product: null,
      
      // 相关推荐商品
      relatedProducts: [],
      isFavorite: false, // 收藏状态
      // 轮播图状态
      currentSwiper: 0,
      zoomScale: 1,
      zoomTransform: 'scale(1)',
      isZooming: false,
      startTouch: {},
      
      // 滚动状态
      scrollTop: 0,
      navBgColor: 'transparent',
      navShadow: 'none',
      
      // 渐显动画状态
      isDescVisible: false,
      isParamsVisible: false,
      isReviewsVisible: false,
      isRecommendsVisible: false,
      
      // 购买栏动画
      buyBarTransform: 'translateY(0)',
      
      // 加载状态
      isLoading: true
    }
  },
  
  onLoad(option) {
    this.loadProductData(option.id)
	uni.setNavigationBarTitle({
		title:option.title
	})
  },
  
  methods: {
	// 切换收藏状态
	toggleFavorite() {
	  this.isFavorite = !this.isFavorite;
	  uni.showToast({ 
		title: this.isFavorite ? '已添加到收藏' : '已取消收藏', 
		icon: 'none' 
	  });
	},
	    
    // 加载商品数据
    loadProductData(productId) {
      setTimeout(() => {
        this.product = {
          id: 101,
          name: 'DJI Agras T40 农业植保无人机',
          tag: '新品',
          price: '49,999',
          originalPrice: '52,999',
          priceUnit: '台',
          condition: 'new',
          usedInfo: '',
          images: [
            'https://st2.depositphotos.com/1027670/5802/i/450/depositphotos_58028431-stock-photo-flying-drone-in-the-skies.jpg',
            'https://picsum.photos/seed/agras2/1200/1800',
            'https://picsum.photos/seed/agras3/1200/1800'
          ],
          shortSpecs: {
            '作业效率': '40亩/小时',
            '药箱容量': '30L',
            '续航时间': '22分钟',
            '适用作物': '水稻、小麦、玉米等'
          },
          description: 'DJI Agras T40 是一款专为农业植保设计的高效无人机系统，搭载全新喷洒与播撒系统，作业效率提升30%。',
          descImages: [
            'https://picsum.photos/seed/agras1/1200/1800',
            'https://picsum.photos/seed/agras2/1200/1800'
          ],
          params: {
            basic: [
              { name: '起飞重量', value: '45.5 kg' },
              { name: '尺寸', value: '1830×1770×775 mm（折叠）' }
            ],
            performance: [
              { name: '喷洒流量', value: '0.5-2.4 L/min' },
              { name: '作业速度', value: '3-7 m/s' }
            ]
          },
          reviewScore: 4.8,
          reviewCount: 126,
          reviews: [
            {
              id: 1,
              userName: '农业合作社',
              avatar: 'https://picsum.photos/seed/user1/100/100',
              score: 5,
              date: '2024-05-12',
              content: '效率非常高，以前200亩地需要3个人喷两天，现在一台机器一天就搞定了。',
              images: [
                'https://picsum.photos/seed/review1/300/300'
              ]
            }
          ]
        }
        
        this.relatedProducts = [
          { id: 102, name: '极飞P100 Pro 植保无人机', image: 'https://picsum.photos/seed/p100/300/300', price: '52,800' },
          { id: 103, name: '大疆T30 二手植保无人机', image: 'https://picsum.photos/seed/t30/300/300', price: '29,999' }
        ]
        
        this.isLoading = false
        this.$nextTick(() => {
          this.checkVisibility()
        })
      }, 800)
    },
    
    // 返回上一页
    navBack() {
      uni.navigateBack({ delta: 1 })
    },
    
    // 轮播图切换
    handleSwiperChange(index) {
	  console.log(index,'---------')
      this.currentSwiper = index.current
      this.zoomScale = 1
      this.zoomTransform = 'scale(1)'
    },
    
    // 预览图片
    previewImage(current) {
		
      uni.previewImage({
        urls: this.product.images,
        current
      })
    },
    
    // 图片缩放相关方法
    handleTouchStart(e) {
      if (e.touches.length === 2) {
        this.isZooming = true
        this.startTouch = {
          distance: this.getTouchDistance(e),
          scale: this.zoomScale
        }
      }
    },
    
    handleTouchMove(e) {
      if (this.isZooming && e.touches.length === 2) {
        const currentDistance = this.getTouchDistance(e)
        this.zoomScale = this.startTouch.scale * (currentDistance / this.startTouch.distance)
        this.zoomScale = Math.min(Math.max(1, this.zoomScale), 3)
        this.zoomTransform = `scale(${this.zoomScale})`
      }
    },
    
    handleTouchEnd() {
      this.isZooming = false
    },
    
    getTouchDistance(e) {
      const touch1 = e.touches[0]
      const touch2 = e.touches[1]
      return Math.sqrt(
        Math.pow(touch1.clientX - touch2.clientX, 2) +
        Math.pow(touch1.clientY - touch2.clientY, 2)
      )
    },
    
    // 滚动处理
    handleScroll(e) {
      this.scrollTop = e.detail.scrollTop
      
      // 导航栏渐变
      const opacity = Math.min(1, this.scrollTop / 300)
      this.navBgColor = `rgba(255, 255, 255, ${opacity})`
      this.navShadow = opacity > 0.5 ? '0 2rpx 10rpx rgba(0, 0, 0, 0.05)' : 'none'
      
      // 购买栏动画
      this.buyBarTransform = 'translateY(100%)'
      clearTimeout(this.buyBarTimer)
      this.buyBarTimer = setTimeout(() => {
        this.buyBarTransform = 'translateY(0)'
      }, 500)
      
      this.checkVisibility()
    },
    
    // 检查元素可见性
    checkVisibility() {
      const screenHeight = uni.getSystemInfoSync().windowHeight
      
      if (this.scrollTop > 50) this.isDescVisible = true
      if (this.scrollTop > screenHeight * 0.3) this.isParamsVisible = true
      if (this.scrollTop > screenHeight * 0.6) this.isReviewsVisible = true
      if (this.scrollTop > screenHeight * 0.9) this.isRecommendsVisible = true
    },
    
    // 加载更多评价
    loadMoreReviews() {
      uni.showToast({ title: '加载中...', icon: 'loading', duration: 1000 })
    },
    
    // 跳转到其他商品详情
    navToDetail(item) {
      uni.navigateTo({ url: `/pages/product/detail?id=${item.id}` })
    },
    
    // 联系卖家
    contactSeller() {
      uni.showModal({
        title: '联系卖家',
        content: '是否拨打卖家电话：400-888-8888',
        confirmText: '拨打',
        cancelText: '取消',
        success: (res) => {
          if (res.confirm) uni.makePhoneCall({ phoneNumber: '4008888888' })
        }
      })
    },
    
    // 加入购物车
    addToCart() {
      uni.showToast({ title: '已加入购物车', icon: 'none' })
    },
    
    // 立即购买
    buyImmediately() {
      uni.navigateTo({ url: `/pages/order/confirm?id=${this.product.id}` })
    }
  }
}
</script>

<style lang="scss" scoped>
/* 颜色系统 */
$primary: #1E40AF;
$primary-light: #EFF6FF;
$success: #059669;
$warning: #D97706;
$danger: #DC2626;

$text-primary: #0F172A;
$text-secondary: #334155;
$text-tertiary: #64748B;

$bg-light: #F8FAFC;
$border-color: #E2E8F0;

/* 颜色方案 */
$favorite-active: #FF3B30; // 收藏激活色
$favorite-bg: #FFF5F5; // 收藏按钮背景
$buy-primary: #00aaff; // 购买按钮主色
$buy-primary-dark: #0066CC; // 购买按钮按压色
$text-gray: #8E8E93; // 未激活文字色

/* 购买栏容器 */
.buy-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 120rpx;
  align-items: center;
  display: flex;
  z-index: 998;
  background-color: #FFFFFF;
  box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);
}

/* 按钮通用样式 */
.action-item {
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

/* 收藏按钮 - 占比30%宽度 */
.favorite-item {
  width: 40%;
  flex-direction: column;
  color: $text-gray;
  background-color: $favorite-bg;
  
  u-icon {
    margin-bottom: 6rpx;
    transition: color 0.2s ease;
  }
  
  &:active {
    background-color: rgba(255, 59, 48, 0.1);
  }
  
  .active-text {
    color: $favorite-active;
    font-weight: 500;
  }
}

/* 立即购买按钮 - 占比70%宽度 */
.buy-item {
  width: 60%;
  background-color: $buy-primary;
  color: #FFFFFF;
  border-radius: 65rpx;
  font-size: 30rpx;
  font-weight: 500;
  position: relative;
  overflow: hidden;
  height: 100rpx;
  &::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.1);
    opacity: 0;
    transition: opacity 0.2s ease;
  }
  
  &:active {
    background-color: $buy-primary-dark;
    
    &::after {
      opacity: 1;
    }
  }
}
/* 页面基础样式 */
.product-detail {
  position: relative;
  min-height: 100vh;
  background-color: #FFFFFF;
}

/* 顶部导航栏 */
.detail-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 100rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 30rpx;
  z-index: 999;
  transition: all 0.3s ease;
  
  .nav-left, .nav-right { display: flex; align-items: center; }
  
  .nav-title {
    font-size: 30rpx;
    color: $text-primary;
    font-weight: 500;
    max-width: 400rpx;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  
  .nav-icon { margin-left: 30rpx; }
}

/* 商品轮播图 */
.product-swiper {
  position: relative;
  z-index: 1;
  
  .swiper-item {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #F1F5F9;
  }
  
  .swiper-img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
  }
}

/* 加载状态 */
.loading {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 100rpx 0;
  gap: 20rpx;
  
  text {
    font-size: 28rpx;
    color: $text-tertiary;
  }
}

/* 详情滚动区域 */
.detail-scroll {
  position: relative;
  z-index: 2;
  background-color: #FFFFFF;
  border-radius: 40rpx 40rpx 0 0;
  margin-top: -80rpx;
  padding-top: 60rpx;
}

/* 商品基本信息 */
.product-base {
  padding: 0 30rpx 30rpx;
  // opacity: 0;
  transform: translateY(30rpx);
  transition: all 0.6s ease-out;
}

.fade-in {
  opacity: 1;
  transform: translateY(0);
}

.product-title {
  font-size: 36rpx;
  font-weight: 700;
  color: $text-primary;
  line-height: 1.3;
  margin-bottom: 20rpx;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 15rpx;
}

.product-tag {
  background-color: $primary;
  color: #FFFFFF;
  font-size: 22rpx;
  padding: 6rpx 16rpx;
  border-radius: 6rpx;
  font-weight: 500;
  margin-top: 5rpx;
}

.product-conditions {
  display: flex;
  align-items: center;
  gap: 8rpx;
  font-size: 24rpx;
  color: $warning;
  margin-bottom: 25rpx;
  padding: 10rpx 15rpx;
  background-color: rgba($warning, 0.05);
  border-radius: 8rpx;
}

.product-price {
  display: flex;
  align-items: center;
  margin-bottom: 25rpx;
  
  .price-number {
    font-size: 40rpx;
    font-weight: 700;
    color: $danger;
    margin-right: 15rpx;
  }
  
  .price-unit {
    font-size: 26rpx;
    color: $text-tertiary;
    align-self: flex-end;
    margin-bottom: 5rpx;
  }
  
  .price-original {
    font-size: 26rpx;
    color: $text-tertiary;
    text-decoration: line-through;
    margin-left: 15rpx;
    align-self: flex-end;
    margin-bottom: 5rpx;
  }
}

.product-specs {
  display: flex;
  flex-wrap: wrap;
  gap: 15rpx 25rpx;
  
  .spec-item {
    display: flex;
    align-items: center;
    font-size: 26rpx;
    
    .spec-key { color: $text-tertiary; }
    .spec-value { color: $text-secondary; font-weight: 500; }
  }
}

/* 分割线 */
.divider {
  height: 20rpx;
  background-color: $bg-light;
  margin: 10rpx 0;
}

/* 通用区块标题 */
.section-title {
  padding: 30rpx 30rpx 15rpx;
  display: flex;
  align-items: center;
  
  text {
    font-size: 32rpx;
    font-weight: 700;
    color: $text-primary;
    position: relative;
    z-index: 2;
    padding-right: 15rpx;
    background-color: #FFFFFF;
  }
  
  .title-line {
    flex: 1;
    height: 1rpx;
    background-color: $border-color;
    margin-left: -15rpx;
  }
}

/* 商品详情描述 */
.product-description {
  padding: 0 30rpx 30rpx;
  // transform: translateY(50rpx);
  transition: all 0.6s ease-out 0.2s;
}

.product-params {
  padding: 0 30rpx 30rpx;
  // opacity: 0;
  transform: translateY(50rpx);
  transition: all 0.6s ease-out 0.4s;
}

.product-reviews {
  padding: 0 30rpx 30rpx;
  // opacity: 0;
  transform: translateY(50rpx);
  transition: all 0.6s ease-out 0.6s;
}

.product-recommends {
  padding: 0 30rpx 30rpx;
  // opacity: 0;
  transform: translateY(50rpx);
  transition: all 0.6s ease-out 0.8s;
}

.desc-content {
  margin-top: 20rpx;
  
  .desc-text {
    font-size: 28rpx;
    color: $text-secondary;
    line-height: 1.6;
    margin-bottom: 30rpx;
    text-align: justify;
  }
  
  .desc-gallery {
    display: flex;
    flex-direction: column;
    gap: 20rpx;
    
    .desc-img {
      width: 100%;
      border-radius: 16rpx;
      margin-bottom: 10rpx;
    }
  }
}

/* 技术参数 */
.params-table {
  padding: 10rpx 0;
  
  .param-row {
    display: flex;
    padding: 20rpx 15rpx;
    border-bottom: 1px solid $border-color;
    
    &:last-child { border-bottom: none; }
    
    .param-name {
      width: 35%;
      font-size: 26rpx;
      color: $text-tertiary;
    }
    
    .param-value {
      flex: 1;
      font-size: 26rpx;
      color: $text-secondary;
      font-weight: 500;
    }
  }
}

/* 评价信息 */
.no-review {
  text-align: center;
  padding: 50rpx 0;
  color: $text-tertiary;
  font-size: 26rpx;
}

.review-summary {
  display: flex;
  align-items: center;
  padding: 20rpx 0;
  border-bottom: 1px solid $border-color;
  
  .review-score {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-right: 40rpx;
    
    .score-number {
      font-size: 50rpx;
      font-weight: 700;
      color: $primary;
    }
    
    .score-desc {
      font-size: 24rpx;
      color: $text-tertiary;
      margin-top: 5rpx;
    }
  }
  
  .review-stars {
    flex: 1;
    display: flex;
    flex-direction: column;
    
    .review-count {
      font-size: 24rpx;
      color: $text-tertiary;
      margin-top: 10rpx;
    }
  }
}

.review-list {
  margin-top: 20rpx;
  
  .review-item {
    padding: 25rpx 0;
    border-bottom: 1px solid $border-color;
    
    &:last-child { border-bottom: none; }
    
    .review-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 15rpx;
      
      .review-avatar {
        width: 60rpx;
        height: 60rpx;
        border-radius: 50%;
        overflow: hidden;
        margin-right: 15rpx;
        
        image { width: 100%; height: 100%; object-fit: cover; }
      }
      
      .review-user {
        flex: 1;
        
        .user-name {
          font-size: 26rpx;
          font-weight: 500;
          color: $text-primary;
          margin-bottom: 5rpx;
          display: block;
        }
      }
      
      .review-date { font-size: 24rpx; color: $text-tertiary; }
    }
    
    .review-content {
      font-size: 26rpx;
      color: $text-secondary;
      line-height: 1.6;
      margin-bottom: 20rpx;
    }
    
    .review-images {
      display: flex;
      gap: 15rpx;
      
      .review-img {
        width: 160rpx;
        height: 160rpx;
        border-radius: 10rpx;
        object-fit: cover;
      }
    }
  }
}

.review-more {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 25rpx 0;
  font-size: 26rpx;
  color: $primary;
  font-weight: 500;
  cursor: pointer;
  gap: 8rpx;
}

/* 相关推荐 */
.no-recommend {
  text-align: center;
  padding: 50rpx 0;
  color: $text-tertiary;
  font-size: 26rpx;
}

.recommends-list {
  display: flex;
  gap: 20rpx;
  overflow-x: auto;
  padding: 10rpx 0 20rpx;
  scrollbar-width: none;
  
  &::-webkit-scrollbar { display: none; }
  
  .recommend-item {
    min-width: 280rpx;
    background-color: $bg-light;
    border-radius: 16rpx;
    overflow: hidden;
    transition: transform 0.3s ease;
    
    &:hover { transform: translateY(-5rpx); }
    
    .recommend-img {
      width: 100%;
      height: 220rpx;
      object-fit: cover;
    }
    
    .recommend-name {
      display: block;
      font-size: 26rpx;
      color: $text-primary;
      padding: 15rpx 15rpx 5rpx;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    
    .recommend-price {
      display: block;
      font-size: 26rpx;
      color: $danger;
      font-weight: 500;
      padding: 0 15rpx 15rpx;
    }
  }
}

/* 底部留白 */
.bottom-space { height: 150rpx; }

/* 购买栏 */
.buy-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 120rpx;
  display: flex;
  background-color: #FFFFFF;
  box-shadow: 0 -2rpx 15rpx rgba(0, 0, 0, 0.05);
  z-index: 998;
  transition: transform 0.3s ease;
  
  .buy-contact {
    width: 20%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: $primary;
    font-size: 24rpx;
    border-right: 1px solid $border-color;
  }
  
  .buy-cart {
    width: 35%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: $primary;
    color: #FFFFFF;
    font-size: 26rpx;
    font-weight: 500;
  }
  
  .buy-now {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: $danger;
    color: #FFFFFF;
    font-size: 26rpx;
    font-weight: 500;
  }
}
</style>
